import React, { useState, useEffect } from 'react';
import lodash from 'lodash';
import { Select, Spin, Empty } from 'antd';
import { connect } from 'umi';
import debounce from 'lodash/debounce';
import { useUpdateEffect } from 'ahooks'
const SelectBlock = (props) => {
    const {
        type,
        select,
        label: plabel,
        suffix,
        loading,
        placeholder,
        fieldNames = {},
        onchange,
        dispatch,
        params = {},
        defaultData,
        optionType
    } = props;

    const divProps = props;
    const { label = 'stageName', value = 'stageIdentification', options = 'subStageInfoList', } = fieldNames;

    const [option, setOption] = useState([])
    const fetchData = () => {
        dispatch({
            type: 'user/fetchListStageInfoBase',
            payload: {

            },
            callback: (e = []) => {
                const { stageInfoList = [] } = e
                console.log(stageInfoList)
                setOption(stageInfoList.map(val => {
                    const {
                        subStageInfoList = [],
                        baseStageFlag,
                        mainStage,
                        repurchase,
                        stageColor,
                        stageIdentification,
                        stageIndex,
                        stageName,
                        stageInfo = {}
                    } = val
                    if (subStageInfoList.length > 0) {
                        if (optionType !== 'father') {
                            return {
                                ...stageInfo,
                                ...val,

                            }
                        }
                        return {
                            ...stageInfo,
                        }
                    }
                    return {
                        ...stageInfo
                    }
                }))
            }
        })
    }
    useEffect(() => {
        fetchData()
    }, [])
    // 自定义下拉菜单
    // 遍历对象
    const arrObject = (obj) => {
        return Object.keys(obj).map((item) => ({
            [label]: obj[item],
            [value]: item,
        }));
    };

    /**
     *  判断传入select 类型
     *  [] | {}
     */
    let selectList = [];
    if (Array.isArray(select)) {
        selectList = select;
    } else if (lodash.isPlainObject(select)) {
        // 若为对象则将遍历成数组赋值
        selectList = arrObject(select);
    }

    // type === tags 配置
    let multProps = {};
    if (type === 'tags') multProps = { mode: 'tags', tokenSeparators: [',', '，'] };
    // type === multiple 配置
    if (type === 'multiple') multProps = { mode: 'multiple', tokenSeparators: [',', '，'] };
    console.log(selectList, 'list')
    return (
        <>
            <Select
                showSearch
                style={{ width: suffix ? '75%' : '100%' }}
                optionFilterProp="children"
                notFoundContent={
                    loading ? <Spin size="small" /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                }
                fieldNames={{
                    label: 'stageName',
                    value: 'stageIdentification',
                    options: 'subStageInfoList',
                }}
                loading={loading}
                filterOption={() => { return true }}
                onChange={(e) => {
                    console.log(e);
                }}
                options={option}
                {...multProps}
                {...divProps}
                placeholder={placeholder || `请选择${plabel}`}
            >
            </Select>
        </>
    );
};
export default connect(({ loading }) => ({
    loading: loading.effects['user/fetchListStageInfoBase'],
}))(SelectBlock);

